<template>
  <el-row id="cpts-energyUnpower">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>非能源产品</span>
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary" @click="openAddDialog()">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <el-collapse v-model="activeName" accordion >
        <el-collapse-item :name="item.id" v-for="item in dataItems">
          <template slot="title">
            <el-row style="width: 100%">
              <el-col :span="22">
                <span>{{item.name}}({{item.code}} )</span>
              </el-col>
              <el-col :span="2">
                <el-button :disabled="!isViewEdit" style="padding: 6px 6px;" type="primary" @click.stop="openSettingDialog(item)">配置
                  <i class="el-icon-setting el-icon--right"></i></el-button>
                <el-button :disabled="!isViewEdit" style="padding: 6px 6px;" type="danger" @click.stop="deleteFather(item.id,'',item.isBinding)">删除
                  <i class="el-icon-delete el-icon--right"></i></el-button>
              </el-col>
            </el-row>


          </template>
          <el-table
            maxHeight="300"
            :data="item.subitems"
            :show-header="isShowHeader"
            stripe
            style="width: 100%">
            <el-table-column
              align="center"
              prop="name"
              label="分项">
            </el-table-column>
            <el-table-column
              align="center"
              prop="code"
              label="分项编码">
            </el-table-column>
            <!--  <el-table-column
                :formatter="statusFormatter"
                align="center"
                prop="isBinding"
                label="状态">
              </el-table-column>-->
            <el-table-column label="操作"  align="right">
              <template slot-scope="scope">
                <el-button :disabled="!isViewEdit"
                  size="mini"
                  @click="handleEditChild(scope.$index, scope.row)">编辑</el-button>
                <el-button :disabled="!isViewEdit"
                  size="mini"
                  type="danger"
                  @click="deleteChild(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <!--弹窗-->
    <el-dialog :visible.sync="addDialogShow">

      <el-row slot="title">
        <span style="font-size: 18px">添加/配置</span>  <el-button @click="handleAddSubmit('ruleForm')" style="margin-left: 760px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
      </el-row>

      <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="100px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="能源分类" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类编码" prop="classificationCode">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row><hr>

        <el-row class="evc-dialog-itemize">
          <el-row class="clearfix">
            <span style="font-size: 18px">分项配置</span>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="能源分项">
                <el-input v-model="itemForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分项编码">
                <el-input v-model="itemForm.code"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-button style="padding: 12px 6px;margin-left: 20px" type="primary" @click="addTableItems">添加<i class="el-icon-plus el-icon--right"></i></el-button>
            </el-col>
          </el-row>

          <el-table
            :data="ruleForm.subitems"
            stripe
            max-height="260"
            style="width: 100%">
            <el-table-column
              align="center"
              prop="name"
              label="分项">
            </el-table-column>
            <el-table-column
              align="center"
              prop="code"
              label="分项编码">
            </el-table-column>
            <el-table-column v-if="isShowDelete" label="操作"  align="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteTableItem(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--   <el-row class="evc-submit-layout">
               <el-button @click="submit('ruleForm')" type="primary" :loading="false">提交</el-button>
             </el-row>-->
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="editDialogShow">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="能源分项">
              <el-input v-model="editDialogDatas.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分项编码">
              <el-input v-model="editDialogDatas.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="evc-submit-layout">
          <el-button @click="handlerItemSubmit" type="primary" :loading="false">提交</el-button>
        </el-row>

      </el-form>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="warnDialogShow"
      width="30%">
      <span>该数据正在被使用,删除会影响数据的正常上报。确定需要删除么?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="warnDialogShow = false">取 消</el-button>
    <el-button type="primary" @click="handlerDeleteForWarn">确 定</el-button>
  </span>
    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: "energyUnpower",
    data(){
      return {
        isViewShow: false,
        isViewEdit: false,
        activeName:'1',
        isShowHeader:false,
        addDialogShow:false,
        editDialogShow:false,
        warnDialogShow:false,
        isShowDelete:true,
        dataItems:[],
        itemForm:{
          name: '',
          code: ''
        },
        ruleForm:{
          id: "",
          name: "",
          code: "",
          subitems: []
        },
        rules: {
          name:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          code:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
        },
        editDialogDatas:{
          id: "",
          parentId: "",
          name: "",
          code: ""
        },
        deleteId:'',
        deleteChildId: ''
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(11)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askLists()
    },
    methods:{
      statusFormatter(row, column) {
        let status = row.isBinding;
        if(status === 0){
          return '未绑定'
        } else {
          return '已绑定'
        }
      },
      openAddDialog(){
        if (!this.addDialogShow) {
          this.addDialogShow = true
        }
        this.isShowDelete = true
        this.resetForm()
      },
      openSettingDialog(item){
        if (!this.addDialogShow) {
          this.addDialogShow = true
          this.ruleForm = this.validateGlobal.cloneObject(item)
        }
        this.isShowDelete = false
        this.itemForm.name = ''
        this.itemForm.code = ''
      },
      deleteFather(key,childkey,status){
        this.deleteId = key
        this.deleteChildId = childkey
        if (status === 0) {
          this.askDelete()
          // this.dataItems.splice(this.dataItems.findIndex(item => item.id === key), 1)
        }else {
          this.deleteId = key
          if (!this.warnDialogShow) {
            this.warnDialogShow = true
          }
        }
      },
      deleteChild(index,item){
        this.deleteFather("",item.id,item.isBinding)
      },
      addTableItems(){
        if (this.itemForm.name && this.itemForm.code) {
          this.ruleForm.subitems.push({name:this.itemForm.name,code:this.itemForm.code})
          this.$message('添加成功!');
          this.itemForm.name = ''
          this.itemForm.code = ''
        }else{
          this.$message('输入有误!');
        }
      },
      handleEditChild(index, row) {
        console.log(index, row);
        if (!this.editDialogShow) {
          this.editDialogShow = true
        }
        this.editDialogDatas = row
      },
      deleteTableItem(index, row) {
        console.log(index, row);
        this.ruleForm.subitems.splice(this.ruleForm.subitems.findIndex(item => item.code === row.code), 1)
      },
      handlerDeleteForWarn(){
        let _that = this
        this.askDelete()
        // this.dataItems.splice(this.dataItems.findIndex(item => item.id === _that.deleteId), 1)
        this.warnDialogShow = false
      },
      resetForm: function(){   // 表单重置
        /* if (this.$refs['ruleForm']!==undefined) {
           this.$refs['ruleForm'].resetFields();
         }*/
        this.ruleForm.id = ''
        this.ruleForm.name = ''
        this.ruleForm.code = ''
        this.ruleForm.subitems = []
        this.itemForm.name = ''
        this.itemForm.code = ''
      },
      handleAddSubmit: function(formName){
        let _that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _that.postNewDatas()
          } else {
            _that.$message('输入有误!');
            return false;
          }
        });
      },
      handlerItemSubmit: function(){
        // 验证  todo

        this.postEdit()
      },
      askLists: function () {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.energyVarieties.nonEnergy.lists
        let askData = {
          userId: userId,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.dataItems = res.data
            if (res.data[0] && res.data[0].id) {
              _that.activeName = String(res.data[0].id)
            }
          }else{
            _that.$message('列表获取失败!');
          }
        })
      },
      postNewDatas: function () {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.energyVarieties.nonEnergy.add + "?userId=" + userId
        let askData = _that.ruleForm
        this.http.post(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('添加成功!');
            _that.addDialogShow = false
            _that.askLists()
          }else{
            _that.$message('新增失败!');
          }
        })
      },
      postEdit: function () {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.energyVarieties.nonEnergy.edit + "?userId=" + userId
        let askData = _that.editDialogDatas
        this.http.post(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('修改成功!');
            _that.editDialogShow = false
            _that.askLists()
          }else{
            _that.$message('修改失败!');
          }
        })
      },
      askDelete: function () {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.energyVarieties.nonEnergy.delete
        let askData = {
          userId: userId,
          parentId:_that.deleteId,
          id:_that.deleteChildId,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('删除成功!');
            _that.editDialogShow = false
            _that.askLists()
          }else{
            _that.$message('删除失败!');
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  #cpts-energyUnpower{

    .el-card{
      margin: 20px 20px 0 20px;
      height: 770px;
    }
    .el-card__body{
      overflow:auto;
    }

    .evc-dialog-itemize{
      > :first-child.el-row{
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }

    .evc-submit-layout{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
